<template>
  <div class="w-full h-full max-w-md mx-auto pt-10 px-8 bg-white">
    <!-- <h2 class="text-center text-2xl font-bold text-gray-800 mb-2">AI任务处理中 ..</h2>
        <div class="text-center text-gray-400 text-sm mb-6">预计5～10分钟，请稍后</div> -->
    <div class="w-full h-3 bg-gray-100 rounded-full mb-8 relative overflow-hidden">
      <div
        class="h-full rounded-full transition-all duration-500 flex items-center justify-end"
        :style="{ width: progress + '%', background: '#436BFF' }"
      >
        <span v-if="progress > 5" class="text-xs text-white font-bold pr-2 select-none"
          >{{ Math.round(progress) }}%</span
        >
      </div>
      <span
        v-if="progress <= 5 && progress > 0"
        class="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-blue-500 font-bold select-none"
        >{{ Math.round(progress) }}%</span
      >
    </div>
    <ul class="mb-4">
      <li
        v-for="(step, idx) in steps"
        :key="step"
        class="flex items-center mb-5 last:mb-0"
      >
        <span
          :class="[
            'w-8 h-8 flex items-center justify-center font-bold text-lg mr-3 border-2',
            idx <= currentStep
              ? 'bg-yxt-blue text-white border-yxt-blue'
              : 'bg-blue-50 text-yxt-blue border-blue-50',
          ]"
          style="border-radius: 50%"
        >
          <span v-if="idx < currentStep">✔</span>
          <span v-else>{{ idx + 1 }}</span>
        </span>
        <span
          :class="[
            idx <= currentStep ? 'text-blue-500 font-bold' : 'text-gray-800',
            'text-base',
          ]"
          >{{ step }}</span
        >
      </li>
    </ul>

    <SalesQuote class="mt-8" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, ComputedRef } from "vue";
import { useMinutesStore } from "@/store";
import { GenerateReportState, GenerateStatus } from "@/types";
import SalesQuote from "./SalesQuote.vue";
// 假设 generateReportState 已在父组件注入或在本组件声明
// const generateReportState = reactive({ progress: 0 });

const steps = [
  "沟通内容解析中",
  "总结内容AI生成中",
  "分析内容AI生成中",
  "辅导内容AI生成中",
];

const store = useMinutesStore();

const generateReportState: ComputedRef<GenerateReportState> = computed(
  () => store.generateReportState
);

const generateStatus: ComputedRef<GenerateStatus> = computed(
  () => store.generateReportState.generateStatus
);

const progress = computed(() => {
  if (generateStatus.value === GenerateStatus.IN_PROCESS) {
    return generateReportState.value.progress * 100;
  }
  return 0;
});

const currentStep = computed(() => progress.value / 30);

function startProgress() {
  // 匀速推进，切屏暂停
}
function handleVisibility() {
  // 监听document.visibilityState
}
onMounted(() => {
  startProgress();
  document.addEventListener("visibilitychange", handleVisibility);
});
onUnmounted(() => {
  document.removeEventListener("visibilitychange", handleVisibility);
});
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
